<template>
	<uni-popup ref="popup" type="bottom" @change="change">
		<view class="cart-popup">
			<view class="header">
				<view class="order-type">
					<view class="font-weight-bold">{{type}}订单</view>
					<view class="extra">{{type}}</view>
				</view>
				<view class="d-flex align-items-center" @tap="clear">
					<image src="/static/images/common/delete.png" class="delete-btn"></image>
					<view>清空购物车</view>
				</view>
			</view>
			<scroll-view scroll-y class="content">
				<view class="wrapper">
					<view class="list">
						<view class="item" v-for="(item, index) in cart" :key="index">
							<view class="left">
								<image :src="item.dishes_cover" mode="widthFix" class="image"></image>
							</view>
							<view class="right">
								<view class="name-and-materials">
									<view class="name">{{item.dishes_name}}</view>
									<view class="materials" v-if="item.materials_text">{{item.materials_text}}</view>
								</view>
								<view class="price-and-actions">
									<view class="price">￥{{item.dishes_price}}</view>
									<actions :number="item.number" @add="add(item)" @minus="minus(item)"></actions>
									<!-- {{item.number}} -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import actions from '../actions/actions.vue'

	export default {
		components: {
			uniPopup,
			actions
		},
		props: {
			cart: {
				type: Array,
				default: () => []
			},
			type: {
				type: String,
				default: '外卖'
			}
		},
		data() {
			return {
				api: this.$getimg,
				// status:3
			}
		},
		// onLoad() {
		// 	let _this = this;
		// 	uni.request({
		// 		url: 'https://apiorder.wzq0307.com/api/Status/index',
		// 		method: 'GET',
		// 		data: {},
		// 		success: (res) => {
		// 			console.log(11111,res.data.data.status);
		// 			_this.status=res.data.data.status;
		// 				uni.setStorage('status',res.data.data.status);
		// 		},
		// 		fail: function(e) {
		// 			console.log(JSON.stringify(e));
		// 		}
		// 	})
		// },
		onshow:function(){
			console.log(cart);
		},
		methods: {
			open() {
				this.$refs['popup'].open()
			},
			close() {
				this.$refs['popup'].close()
			},
			change({
				show
			}) {
				this.$emit('change', show)
			},
			add(item) {
			console.log(111110,item);
				// if(item){
				// 	item.number+=1;
				// }
				this.$emit('add', item)
			},
			minus(item) {
					console.log(11111010,item);
					// if(item.number>1){
					// 	item.number-=1;
					// }
				this.$emit('minus', item)
			},
			clear() {
				uni.showModal({
					content: '清空购物袋',
					confirmColor: '#DBA871',
					success: res => {
						if (res.confirm) {
							this.$emit('clear')
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cart-popup {
		background-color: #ffffff;
		padding-bottom: 100rpx;
	}

	.header {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
		font-size: 24rpx;
		color: #999;

		.order-type {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333;

			.extra {
				margin-right: 10rpx;
				border: 2rpx solid #CE935B;
				font-size: 18rpx;
				padding: 2rpx 10rpx;
				color: #CE935B;
				margin-left: 10rpx;
			}
		}

		.delete-btn {
			width: 46rpx;
			height: 46rpx;
			margin-right: 10rpx;
		}
	}

	.content {
		max-height: calc(100vh - 600rpx);

		.wrapper {
			width: 100%;
			height: 100%;
			padding: 0 30rpx;
		}

		.list {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.item {
				display: flex;
				align-items: stretch;
				padding: 30rpx 0;
				position: relative;

				&:after {
					content: ' ';
					position: absolute;
					bottom: 0;
					left: 180rpx;
					right: 0;
					border-bottom: 1rpx solid #e5e5e5;
				}

				.left {
					flex-shrink: 0;
					display: flex;
					align-items: center;

					.image {
						width: 180rpx;
						margin-right: 15rpx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333;

					.name-and-materials {
						display: flex;
						flex-direction: column;
						margin-bottom: 10rpx;

						.name {
							font-weight: bold;
						}

						.materials {
							font-size: 24rpx;
							color: #999;
							margin-top: 10rpx;
						}
					}

					.price-and-actions {
						display: flex;
						justify-content: space-between;

						.price {
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
